<template>
  <div class="sm">
    <span class="sm-title">学生管理</span>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="班级">
        <el-select v-model="studentKeyword.cid" placeholder="选择班级">
          <el-option :label="item.name" :value="item.cid" v-for="(item) in classes" :key="item.cid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label>
        <el-input placeholder="输入学生姓名" v-model="studentKeyword.keyword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogFormVisible=true">新建学生</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="sid" label="编号" width="300"></el-table-column>
      <el-table-column prop="name" label="学生名称" width="180"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="clazz.name" label="班级"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="handleEditClick(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--        新建学生-->
    <el-dialog title="新建学生" :visible.sync="dialogFormVisible" width="30vw">
      <el-form label-position="left" label-width="70px" :model="newStudentForm">
        <el-form-item label="学生名称">
          <el-input autocomplete="off" v-model="newStudentForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="newStudentForm.sex" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="newStudentForm.clazz.cid" placeholder="请选择班级">
            <el-option
              :label="item.name"
              :value="item.cid"
              v-for="(item) in classes"
              :key="item.cid"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="newStuConfirm">确 定</el-button>
      </div>
    </el-dialog>

<!--    编辑-->
    <el-dialog title="编辑学生" :visible.sync="dialogEdit" width="30vw">
      <el-form label-position="left" label-width="70px" :model="editStudentForm">
        <el-form-item label="学生名称">
          <el-input autocomplete="off" v-model="editStudentForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="editStudentForm.sex" :placeholder="editStudentForm.sex===1?'男': '女'">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="editStudentForm.clazz.cid" :placeholder="editStudentForm.clazz.name">
            <el-option
                    :label="item.name"
                    :value="item.cid"
                    v-for="(item) in classes"
                    :key="item.cid"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false">取 消</el-button>
        <el-button type="primary" @click="editStuConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "StuManage",
  data() {
    return {
      dialogFormVisible: false,
      dialogEdit: false,
      value1: "", //新建学生dialog
      classValue: "",
      classes: [
        {
          name: "计本1班",
          cid: "1",
        },
        {
          name: "计本2班",
          cid: "2",
        },
      ],
      studentKeyword: {
        cid: '',
        keyword: ''
      },
      newStudentForm: {
        organization: "",
        name: "",
        sex: "",
        clazz: {
          cid: "",
        },
      },
      editStudentForm:{
        sid: "sc2020207151503001",
        name: "张三",
        sex: 1,
        organization:{
          orgId: '',
        },
        clazz: {
          name: "",
          cid: "",
        },
      },
      tableData: [
        {
          sid: "sc2020207151503001",
          name: "张三",
          sex: "男",
          clazz: {
            name: '',
            cid: ''
          }
        },
      ],
    };
  },
  methods: {
    getStuFindAll() {
      if (this.scId != null) {
        this.$Http.studentFindAll(this.scId).then((res) => {
            let data = res.data;
            console.log(data);
            this.tableData = data.map((item) => {
              return {
                sid: item.sid,
                name: item.name,
                sex: item.sex == 1 ? "男" : "女",
                clazz: {
                  name: item.clazz.name,
                  cid: item.clazz.cid
                },
              };
            });
        });
      } else {
        this.$message.warning("无法获取数据,没有学校数据");
      }
    },
    getClassFindAll() {
      if (this.scId != null) {
        this.$Http.classFindAll(this.scId).then((res) => {
            let data = res.data;
            let classes = data.map((item) => {
              return {
                name: item.name,
                cid: item.cid,
              };
            });
            this.classes = classes;
        });
      } else {
        this.$message.warning("无法获取数据,没有学校数据");
      }
    },
    searchKeyword(){  //关键字查询学生
      if(this.studentKeyword.cid === '' && this.studentKeyword.keyword === ''){
        this.$message.warning('请输入或选择查询条件')
      }else{
        this.$Http.studentKeyword(this.scId, this.studentKeyword).then(res => {
          let data = res.data
          console.log(data)
          this.tableData = data.data.content.map(item => {
            return {
              sid: item.sid,
              name: item.name,
              sex: item.sex == 1 ? "男" : "女",
              clazz: {
                name: item.clazz.name,
                cid: item.clazz.cid
              },
            }
          })
        });
      }
    },
    handleSearch(){
      this.searchKeyword()
    },
    newStuConfirm() {
      // console.group("新建学生")
      let form = this.newStudentForm;
      let organization = {
        orgId: this.scId,
      };
      form.organization = organization;
      console.log(form);
      if (form.name !== "" || form.clazz.cid !== "" || form.sex !== "") {
        this.$Http.studentAdd(this.scId, form).then((res) => {
          if (res.data.status === 200) {
            this.$message.success("新建学生成功");
            this.getStuFindAll()
            this.dialogFormVisible = false
          } else {
            this.$message.error("新建失败");
          }
        });
      } else {
        this.$message.warning("填完表单");
      }
      // dialogFormVisible = false
    },//确定新建学生
    handleClick(row) {
      console.log(row);
    },
    handleEditClick(row) {
      this.dialogEdit = true
      this.editStudentForm.name = row.name
      this.editStudentForm.sid = row.sid
      this.editStudentForm.sex = row.sex==='男'? '1':'2'
      this.editStudentForm.organization.orgId = this.scId
      this.editStudentForm.clazz.cid = row.clazz.cid
      console.log(this.editStudentForm)
    },//编辑学生
    editStuConfirm(){
      let params = this.editStudentForm
      this.$Http.studentUpdata(this.scId, params).then(res=>{
        console.log(res)
      })
      this.dialogEdit = false
    },//编辑确定，发请求
  },
  mounted() {
    // this.getStuFindAll();
    // this.getClassFindAll();
  },
  computed: {
    scId() {
      return this.$store.state.scId;
    },
  },
  watch: {
    scId: {
      handler() {
        this.getStuFindAll();
        this.getClassFindAll();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../../public/style.scss";
.sm {
  color: $normalColor;
  font-size: 18px;
}
.sm-title {
  color: $normalColor;
  font-weight: 700;
  font-size: 28px;
  display: block;
  margin-bottom: 30px;
}
.el-input {
  width: 20vw;
}
</style>